<script setup>
import {watch,ref ,defineProps,onMounted} from 'vue'

import { Search} from '@element-plus/icons-vue'
import GameCard from '../modals/GameCard.vue'
import LoginCard from '../modals/LoginCard.vue'
import ButtonCard from '../modals/ButtonCard.vue'
import { useRouter } from 'vue-router'
import WeChatLoginPage from '../modals/WeChatLoginPage.vue'
import UserInfoCard from '../modals/UserInfoCard.vue'
import AvatarLoginCard from '../modals/AvatarLoginCard.vue'
import { useUserStore } from '@/store/useUserStore'
import { useMessageStore } from '@/store/useMessageStore'
import { storeToRefs } from 'pinia'
import { getUnReadCount } from '@/api/myMessage'
const userStore = useUserStore()
const messageStore = useMessageStore()
const router = useRouter()
const showMore = ref(false)
const { userInfo } = storeToRefs(userStore) //用户信息
const { isLogin } = storeToRefs(userStore) //是否登录
const { myMessageCount, replyMessageCount, atMessageCount, likeMessageCount, totalMessageCount} = storeToRefs(messageStore) //消息列表
const showqrCodeCard=ref(false) //显示二维码

defineProps(['isCategoryShow']) //是否显示分类栏
//监听是否登录完成isLogin
watch(isLogin, (newVal) => {
  if(newVal) {
    showqrCodeCard.value = false
  }
})
//点击登录
const handleLogin = () => {
  console.log('登录')
  showqrCodeCard.value = true
}

const handleVideoContribute=()=>{
  router.push('/videoContribute')
}

const handleClickMessage=()=>{
  if(!isLogin.value) return;
  router.push('/messageCenter')
}
// 中间分类栏
 const tags1 = [
    '番剧', '国创', '综艺', '动画', '鬼畜', '舞蹈', '娱乐', '科技数码', '美食', '汽车', '体育运动', 
    '专栏','活动'
  ]
  const tags2=[
    '电影','电视剧','记录片','游戏','音乐','影视','知识','资讯','小剧场','时尚美妆','动物','直播','课堂','热歌新榜','vlog','绘画','人工智能','家装房产','户外潮流','健身','手工','旅游出行','三农','亲子','健康','情感','生活兴趣','生活经验','公益','超高清'
  ]

  //获取未读消息总数
const getUnreadMessageCount = async () => {
  if(!isLogin.value) return;
  if(!userInfo.value.userId) return;
  try{
    const res = await getUnReadCount(userInfo.value.userId);
    console.log(res)
    if(!res) return;
    messageStore.setMyMessageCount(res.myMessage)
    messageStore.setReplyMessageCount(res.replyMessage)
    messageStore.setAtMessageCount(res.atMeMessage)
    messageStore.setLikeMessageCount(res.likeMessage)
  }catch(err){
    console.log(err)
  }
}

onMounted(() => {
  getUnreadMessageCount()
})


</script>
<template>
<header>
  <div class="header-container" id="headerContainer">
    <div class="navbar-container">
      <!-- 左侧导航栏 -->
      <ul class="bili-menu">
          <li class="download-client" @click="$router.push('/homePage')">
            <svg t="1626764977164" viewBox="0 0 2240 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4404" xmlns:xlink="http://www.w3.org/1999/xlink" :style="{ width: 60,height: 27}" class="mini-header__logo"><path d="M2079.810048 913.566175c-10.01309 0-18.554608 0.799768-26.936172-0.159954-16.987063-1.951433-33.974126-1.567544-50.99318-2.079395-10.972811-0.287916-10.652904-0.287916-11.580634-10.90883-2.71921-32.406582-5.694345-64.781173-8.605499-97.155764-2.527266-28.439735-4.926568-56.91146-7.70976-85.319204-2.527266-26.040432-5.566382-52.016883-8.317583-78.025324-2.623238-24.440897-5.054531-48.913784-7.77374-73.322691a12681.114551 12681.114551 0 0 0-10.684895-92.133223c-3.295042-27.128116-6.558094-54.320213-10.205034-81.416339a20559.272961 20559.272961 0 0 0-17.530905-125.979387c-6.398141-44.723002-14.075909-89.22207-22.105576-133.657156-1.439582-7.965685-1.247637-8.253601 6.36615-9.533229 31.670796-5.406429 63.501545-10.01309 95.716183-9.309295 3.486987 0.095972 7.005964 0.159954 10.460959 0.607823 5.662354 0.703795 8.605499 3.454996 8.925406 10.045081 1.119675 22.969325 2.71921 45.938649 4.414717 68.875983 2.71921 37.589076 5.662354 75.178151 8.477537 112.735236 1.791479 24.184971 3.327033 48.305961 5.150503 72.426951 2.911154 38.772732 5.982261 77.513473 8.925406 116.286205 1.791479 23.705111 3.359024 47.474203 5.182494 71.179313 2.783191 34.805885 5.822308 69.579778 8.637489 104.353672 1.791479 22.137566 3.391014 44.307123 5.278466 66.44469 2.783191 32.79047 5.790317 65.580941 8.63749 98.371411 2.143377 25.592562 4.09481 51.249106 6.270178 77.673426zM853.670395 114.918282c4.638652 0 11.644616-0.511851 18.554607 0.127963 8.797443 0.799768 10.49295 3.071107 11.036793 11.900541 2.527266 40.372267 4.894578 80.776524 7.581796 121.180782 2.943145 43.571337 6.174206 87.078693 9.405267 130.586048 2.975135 39.956388 5.950271 79.912775 9.149341 119.869163 3.486987 43.891244 7.357862 87.718507 10.876839 131.609751 2.655228 33.622229 4.926568 67.244457 7.677768 100.898677 2.623238 31.222926 5.694345 62.38187 8.509527 93.572805 2.399303 26.8402 4.830596 53.71239 7.165918 80.58458 0.735786 8.509527 0.127963 9.053369-9.053369 8.829434-24.025018-0.575833-47.922073-3.391014-71.947091-2.71921-5.502401 0.159954-7.101936-2.367312-8.029666-7.581796-1.983424-11.356699-1.663517-22.905343-2.879163-34.390006-3.295042-30.359177-5.182494-60.846317-7.965685-91.269474-2.495275-27.639967-5.502401-55.215953-8.349574-82.82393-2.527266-25.240664-5.02254-50.481329-7.709759-75.753984-2.687219-24.792795-5.534392-49.61758-8.349573-74.442365-2.591247-22.841362-5.118512-45.682723-7.869713-68.524085-4.062819-33.462275-8.093648-66.92455-12.508365-100.322844-4.062819-30.647093-8.66948-61.198214-12.988225-91.813317-5.886289-41.587914-12.508365-83.079855-19.834236-124.411842a1393.96288 1393.96288 0 0 0-5.310457-28.023856c-0.959721-4.702633-0.095972-7.421843 5.278466-8.157629 14.139891-1.887451 28.24779-4.830596 42.451663-6.206196 14.203872-1.311619 28.407744-3.966847 45.106891-2.71921z m1006.075609 403.33878c27.064134 0 27.703949 0.191944 32.054684 24.536869 5.342447 30.03927 9.08536 60.334465 12.636328 90.62966 3.742912 32.278619 7.517815 64.557238 10.972811 96.867848 2.783191 26.008441 5.118512 52.080864 7.74175 78.089305 2.7512 27.256079 5.662354 54.416185 8.509527 81.640274 1.567544 15.387528 3.039117 30.775056 4.798605 46.130593 0.511851 4.446708-0.831758 6.81402-5.214485 7.325871-9.245313 1.055693-18.426645 2.27134-27.639967 3.263052-16.891091 1.82347-33.814173 3.614949-50.737254 5.182493-8.733462 0.799768-9.309294 0.319907-10.940821-8.125638-14.843686-76.617733-29.719363-153.171485-44.435086-229.821208-9.789155-50.961189-19.322384-101.95437-28.919595-152.915559a805.525894 805.525894 0 0 1-3.582959-21.081873c-0.639814-4.030829 0.44787-6.622075 5.022541-7.70976 30.48714-7.133927 61.294186-12.636328 89.733921-14.011927z m-1137.077537 0c28.951586 0 28.823623 0.095972 33.302322 26.360339 6.909992 40.660183 11.804569 81.544301 16.187295 122.556382 4.286754 39.796434 8.957397 79.560878 13.148179 119.357311 2.847173 27.224088 5.086522 54.512157 7.74175 81.704255 1.887451 19.354375 4.126801 38.644769 6.174206 57.967153 0.255926 2.367312 0.383888 4.734624 0.543842 7.133927 0.415879 9.469248 0 10.237025-9.117351 11.164755-18.074747 1.887451-36.181485 3.454996-54.256232 5.246476-6.558094 0.639814-13.084197 1.599535-19.57831 2.239349-8.63749 0.799768-8.925406 0.767777-10.620913-7.965685-6.078234-30.679084-11.964523-61.422149-17.914793-92.101233-14.267853-73.898523-28.69566-147.733065-42.867542-221.631589-5.662354-29.559409-10.524941-59.246781-16.091323-88.838181-1.023702-5.406429-0.255926-7.933694 5.342447-9.245313 30.199223-7.037955 60.590391-12.540355 88.006423-13.947946z m382.128944 309.861946v124.027954c0 1.183656-0.127963 2.399303 0.03199 3.582959 0.607823 6.014252-1.599535 8.66948-7.805731 8.413555-8.157629-0.351898-16.251277-0.127963-24.408906 0.063981-17.019054 0.319907-34.070098-0.351898-51.057162 1.599535-9.405267 1.087684-9.213322 0.511851-10.141052-9.405266-2.783191-31.222926-5.822308-62.413861-8.669481-93.636787-2.623238-28.823623-4.99055-57.711228-7.677768-86.534851-2.71921-29.655381-5.758326-59.214791-8.509527-88.838181-1.887451-19.770254-3.550968-39.508518-5.214485-59.278772-2.175368-25.720525-4.190782-51.409059-6.462122-77.129585-0.959721-10.844848-0.159954-12.380402 10.588923-13.500076a531.877423 531.877423 0 0 1 83.527724-2.591247c6.941982 0.383888 13.851974 1.727498 20.570022 3.359024 8.477536 2.015414 9.405267 3.263052 9.853137 12.124476 0.92773 17.850812 1.855461 35.701624 2.335321 53.584427 0.543842 19.866226 0.095972 39.764443 0.831758 59.63067 1.855461 54.800074 1.567544 109.664129 2.207359 164.528184z m1134.806197 5.630364v117.437869c0 1.983424-0.063981 3.966847 0.03199 5.982262 0.415879 5.150503-1.983424 6.973973-6.878001 6.941982-12.028504-0.095972-24.025018 0-36.021531 0.159954-13.564058 0.127963-27.096125 0.063981-40.628192 1.535553-8.925406 1.023702-8.989387 0.351898-9.789155-8.509527-3.678931-40.660183-7.549806-81.320366-11.260728-122.04453-3.391014-37.525094-6.526103-75.082179-9.981099-112.639265-3.550968-38.740741-7.421843-77.38551-10.90883-116.09426-1.727498-19.386366-3.16708-38.772732-4.606661-58.159097-0.575833-8.445546 0.351898-9.949109 9.885127-10.716886 16.571184-1.311619 33.078387-3.550968 49.777534-3.263051 16.635165 0.319907 33.302322-0.607823 49.841515 2.559256 14.011928 2.687219 14.715723 3.486987 15.547481 18.458635 2.399303 44.051198 1.663517 88.230358 3.231061 132.281556 1.599535 46.89837 0.479861 93.79674 1.759489 146.069549zM1831.498213 305.135c9.789155 0.575833 17.498914 0.095972 25.176683 1.791479 4.894578 1.119675 7.357862 3.327033 7.837723 8.573509 2.303331 25.240664 4.798605 50.51332 7.32587 75.785975 2.015414 20.50604 4.158791 41.012081 6.238188 61.518121l0.191944 1.183656c1.663517 12.924244 1.279628 13.276142-11.292718 13.979937-11.196746 0.607823-22.361501 1.599535-33.558247 2.27134-7.357862 0.44787-9.693183 1.695507-10.90883-9.021378-4.190782-37.813011-9.053369-75.530049-13.692021-113.311069a1185.0316 1185.0316 0 0 0-4.286754-31.798759c-0.92773-5.982261 1.407591-9.277304 7.005964-9.757164 7.357862-0.671805 14.715723-0.863749 19.962198-1.215647z m-1133.398606 0.159954c7.549806 0.415879 15.323547-0.159954 22.937334 1.599535 4.350736 0.991712 6.558094 2.815182 6.973973 7.773741 0.92773 11.83656 2.7512 23.641129 3.870875 35.477689 3.550968 36.309448 6.909992 72.650886 10.237025 108.992324 0.703795 7.901704 0.543842 8.061657-6.84601 8.605499-13.116188 0.959721-26.264367 1.919442-39.412546 2.463284-7.645778 0.351898-8.605499-0.575833-9.56522-8.381564-3.327033-26.744227-6.462122-53.520446-9.661192-80.296664-2.591247-22.073585-4.766615-44.14717-7.901704-66.156773-0.863749-6.078234 1.119675-7.74175 5.982262-8.733462 7.709759-1.567544 15.451509-1.055693 23.385203-1.343609z m399.147998 100.002936c0 23.001315 0.063981 45.97064-0.031991 69.003946 0 10.332997-0.127963 10.396978-10.396978 10.269016a324.289753 324.289753 0 0 1-36.981252-1.919443c-7.933694-0.991712-8.093648-0.735786-8.317583-9.149341-0.799768-28.119828-1.631526-56.239655-2.207359-84.359483-0.415879-19.034468-0.639814-38.004955-1.791479-57.039422-0.607823-9.821146-0.063981-9.917118 9.373276-10.045081 13.915956-0.159954 27.799921 0.479861 41.619904 2.591247 8.317583 1.279628 8.701471 1.279628 8.733462 10.49295 0.063981 23.385204 0.063981 46.770407 0.063981 70.187602h-0.063981z m1135.38203 0.607824c0 23.033306 0.063981 46.034621-0.031991 69.035936 0 9.661192-0.159954 9.725174-9.853137 9.661192a505.32514 505.32514 0 0 1-38.132917-1.791479c-6.302168-0.479861-8.157629-3.135089-7.74175-8.861425 0.063981-0.799768 0-1.599535 0-2.399302-0.959721-44.403095-1.919442-88.7742-2.815182-133.177296-0.031991-2.367312-0.159954-4.734624-0.063982-7.133926 0.127963-8.957397 0.159954-9.181332 9.149341-9.117351 12.380402 0.063981 24.664832 0.703795 37.013243 1.919442 15.067621 1.503563 12.412393 3.359024 12.476375 15.259566 0.063981 22.169557 0.031991 44.403095 0 66.604643z m-1565.593 54.000306c0.287916 12.636328 0.287916 12.604337-11.804569 15.547481-8.221611 2.015414-16.443221 4.222773-24.728813 6.046243-7.069945 1.599535-8.317583 0.703795-9.53323-6.238187-8.445546-47.090314-16.8591-94.212619-25.240664-141.334924-1.695507-9.757164-1.247637-10.364988 8.349573-12.060495 11.804569-2.079396 23.577148-4.126801 35.381717-5.950271 7.517815-1.183656 8.477536-0.767777 9.9811 7.517815 2.975135 16.731138 5.790317 33.526256 7.997675 50.385357 3.423005 26.680246 6.238187 53.456464 9.309295 80.168701 0.255926 1.951433 0.191944 3.966847 0.287916 5.91828z m1064.138735-136.696273c15.451509-2.527266 31.030982-5.086522 46.610454-7.549806 5.598373-0.863749 7.29388 2.655228 8.029666 7.645778 2.655228 18.426645 5.982261 36.725327 8.157629 55.183962 3.19907 26.744227 7.581797 53.360492 8.413555 80.328655 0.063981 2.7512 0.031991 5.566382 0.095972 8.317583 0.159954 4.286754-1.983424 6.494113-5.950271 7.421843-10.556932 2.367312-21.113864 4.734624-31.638805 7.261889-5.054531 1.215647-6.750038-0.92773-7.581796-5.854298-3.16708-18.746552-6.81402-37.397131-10.045081-56.079702-5.47041-30.775056-10.780867-61.582103-16.091323-92.38915-0.127963-1.119675 0-2.303331 0-4.286754z m-710.64147 108.032603c-0.44787 16.37924 0.543842 30.647093-1.695507 44.914947-0.671805 4.510689-1.983424 7.421843-6.846011 7.837722-10.428969 0.863749-20.825947 1.695507-31.190935 2.7512-5.02254 0.543842-6.430131-1.631526-7.261889-6.558094-2.335321-14.55577-1.919442-29.303484-3.327033-43.923234-2.655228-27.607976-3.774903-55.407897-5.566383-83.111846-0.44787-6.750038-1.119675-13.436095-1.663516-20.186134-0.287916-3.774903 1.215647-5.886289 5.246475-6.046242 13.500077-0.543842 26.936172-3.007126 40.50023-2.527266 7.933694 0.287916 8.605499 0.799768 9.181331 8.797443 0.351898 5.534392 0.255926 11.132765 0.383889 16.699147l2.239349 81.352357z m1134.902169-15.867388c0 19.066459 0.223935 38.132918-0.031991 57.199376-0.159954 9.917118-1.279628 10.780867-10.652904 11.644616-9.277304 0.863749-18.490626 1.567544-27.735939 2.559256-5.214485 0.543842-7.645778-0.991712-7.965685-6.973973-1.34361-25.336637-3.16708-50.673273-4.926568-75.977919-1.3756-20.985901-2.943145-41.939811-4.414717-62.893722-0.159954-2.399303-0.031991-4.798605-0.191944-7.165917-0.223935-4.190782 1.055693-6.654066 5.758326-6.81402 13.116188-0.44787 26.136404-2.975135 39.348564-2.495274 8.061657 0.287916 8.18962 0.415879 8.797444 8.797443 1.951433 27.32006 2.143377 54.704102 2.015414 82.120134zM628.295894 756.171918c16.571184 18.234701 17.402942 39.828425 11.932532 62.413861-5.502401 22.585436-18.042756 41.204025-33.23834 57.903171-25.49659 27.895893-56.303637 48.497905-89.062116 65.99682-56.399609 30.135242-116.190232 50.161422-178.572103 61.997982-44.882956 8.477536-90.053828 15.00364-135.704561 17.498914-13.915956 0.767777-27.799921 1.407591-41.715876 1.311619-10.077071 0-20.186133 0.287916-30.231214-0.063981-8.541518-0.319907-9.789155-1.791479-10.49295-10.716886-2.591247-32.022693-4.798605-64.077378-7.645778-96.100071-3.327033-37.109215-7.229899-74.18644-10.812858-111.295654-2.623238-26.8402-4.894578-53.744381-7.773741-80.520599-3.327033-31.542833-7.069945-63.021684-10.716885-94.564517-3.327033-29.111539-6.526103-58.28706-10.045081-87.430591-3.934856-32.278619-7.997676-64.493257-12.31642-96.707894a8228.968456 8228.968456 0 0 0-13.212161-92.996973 5984.500754 5984.500754 0 0 0-24.312934-152.627642 3243.825263 3243.825263 0 0 0-23.67312-123.740038c-1.151665-5.502401 0.511851-7.709759 5.342448-9.725174C52.335283 47.609843 98.465876 28.063524 144.724432 8.77313c8.605499-3.582959 17.434933-6.590085 26.584274-8.285592 6.334159-1.183656 7.965685 0.127963 7.773741 6.494113-0.479861 16.283268 0.191944 32.630517-1.407591 48.849803a161.393095 161.393095 0 0 0-0.639814 13.084197c-0.735786 58.383032-1.439582 116.798056 0.095972 175.213079 1.34361 51.185124 4.030829 102.338258 7.005964 153.491392 2.335321 40.372267 5.694345 80.744534 9.149341 121.052819 3.391014 39.508518 7.517815 78.953054 11.38869 118.461572 0.735786 7.517815 1.407591 8.221611 9.949108 7.069945a381.329176 381.329176 0 0 1 50.833227-4.190782c52.880632-0.127963 104.897514 7.133927 156.338564 19.322384 45.010919 10.684895 88.806191 24.920757 130.777993 44.818975 20.793957 9.853136 40.692174 21.241827 58.830902 35.701624 6.174206 4.862587 11.676606 10.46096 16.891091 16.315259z m1126.840512-9.597211c20.47405 17.946784 27.927883 39.924397 22.105576 67.116494-4.830596 22.425483-15.771416 41.268006-30.359177 58.127107-23.417194 27.096125-51.856929 47.698138-82.631985 64.909136-60.334465 33.782182-124.603787 55.727804-192.168151 68.396122a1151.089465 1151.089465 0 0 1-111.455609 15.547481c-21.177845 1.82347-42.451662 4.09481-66.220754 2.623238h-27.76793c-5.406429 0-8.477536-1.695507-8.925406-8.125638-2.047405-28.087837-4.414717-56.143683-6.941983-84.19953-2.687219-29.623391-5.662354-59.246781-8.477536-88.870172-2.559256-27.224088-4.926568-54.512157-7.709759-81.736245-2.559256-25.656544-5.502401-51.249106-8.285592-76.873659-2.591247-24.057008-5.086522-48.114017-7.933695-72.139035-3.423005-29.111539-7.037955-58.223079-10.652904-87.334618-3.391014-27.160107-6.750038-54.288222-10.364987-81.416338a6133.577429 6133.577429 0 0 0-12.156467-87.142675c-5.694345-37.653057-11.804569-75.178151-17.818822-112.767227a3259.14881 3259.14881 0 0 0-29.111539-158.993792c-0.44787-2.335321-0.671805-4.734624-1.3756-7.005964-1.663517-5.118512-0.063981-7.837722 4.958559-9.821146C1191.012355 47.641834 1238.61452 24.448575 1288.2321 6.149893c6.494113-2.431293 13.052207-5.150503 20.058171-5.854299 6.302168-0.639814 7.901704 0.383888 7.29388 7.101936-3.327033 36.43741-1.407591 73.066765-3.135089 109.536166-1.407591 29.751354-1.247637 59.598679 0.255926 89.382023 0.351898 7.549806 0.639814 15.131602 0.575832 22.649418-0.383888 35.765606 1.503563 71.499221 3.327033 107.200845 2.335321 47.186286 5.758326 94.276601 9.245313 141.398906 2.527266 34.006117 5.822308 67.948253 9.021379 101.922379 1.695507 18.586598 3.518977 37.141206 5.822308 55.631832 1.247637 10.205034 1.759489 10.301006 11.772578 8.957396 17.658868-2.399303 35.349726-4.350736 53.200539-4.09481 62.637796 0.799768 124.027954 10.684895 184.266447 27.863902 40.788146 11.580634 80.488608 26.040432 117.981712 46.290547a253.55831 253.55831 0 0 1 47.218277 32.438573zM308.676783 922.811488c23.161269-11.068783 135.608589-98.947243 144.533995-113.279078-54.576139-23.513166-109.344222-45.362816-168.239105-63.24562l23.70511 176.524698z m1277.196815-107.520752c2.879163-3.103098 2.559256-5.502401-1.343609-7.229899-7.773741-3.550968-15.4835-7.325871-23.353213-10.556932-42.003793-17.179007-84.19953-33.814173-127.482951-47.37823-3.774903-1.151665-7.645778-3.774903-12.476374-1.535554l23.321222 173.45359c3.454996 0.767777 4.798605-0.831758 6.33416-1.919442 39.316574-28.855614 78.889073-57.35933 116.638102-88.390312 6.36615-5.182494 12.668318-10.396978 18.362663-16.443221z" fill="#00AEEC" p-id="4405"></path></svg>
            <span>首页</span>
          </li>
           <li>
            <span>番剧</span>
          </li>
          <li>
            <span>直播</span>
          </li>
        <el-popover 
          placement="bottom" 
          trigger="hover" 
          :show-arrow="false"  
          width="426px"
          :popper-style="{
          borderRadius: '10px'
           }"
          >
            <template #reference>
              <li>
                <span>游戏中心</span>
              </li>
            </template>
              <GameCard></GameCard>
          </el-popover>
          <li>
            <span>会员购</span>
          </li>
          <li>
            <span>漫画</span>
          </li>
          <li>
            <span >赛事</span>
          </li>
           <li>
            <span class="igored-text">MSI</span>
          </li>
          <li>
            <span class="igored-text">BW</span>
          </li>
          <li class="download-client">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="download-client-trigger__icon"><path d="M7.23181 8.65895V1.75796C7.23181 1.33935 7.57582 1 8.00018 1C8.42453 1 8.76854 1.33935 8.76854 1.75796V8.67097L9.98589 7.47009C10.286 7.17409 10.7725 7.17409 11.0725 7.47009C11.3726 7.7661 11.3726 8.24601 11.0725 8.54201L8.54958 11.0308C8.24952 11.3268 7.76302 11.3268 7.46295 11.0308L4.94002 8.54201C4.63995 8.24601 4.63995 7.7661 4.94002 7.47009C5.24008 7.17409 5.72658 7.17409 6.02665 7.47009L7.23181 8.65895Z" fill="currentColor"></path><path d="M3.48023 4.29936C2.40686 4.29936 1.53672 5.15772 1.53672 6.21656V11.5669C1.53672 12.6257 2.40686 13.4841 3.48023 13.4841H12.5198C13.5931 13.4841 14.4633 12.6257 14.4633 11.5669V6.21656C14.4633 5.15772 13.5931 4.29936 12.5198 4.29936H11.6158C11.1915 4.29936 10.8475 3.96001 10.8475 3.5414C10.8475 3.12279 11.1915 2.78344 11.6158 2.78344H12.5198C14.4418 2.78344 16 4.3205 16 6.21656V11.5669C16 13.4629 14.4418 15 12.5198 15H3.48023C1.55815 15 0 13.4629 0 11.5669V6.21656C0 4.3205 1.55815 2.78344 3.48023 2.78344H4.38418C4.80853 2.78344 5.15254 3.12279 5.15254 3.5414C5.15254 3.96001 4.80853 4.29936 4.38418 4.29936H3.48023Z" fill="currentColor"></path></svg>
            <span>客户端下载</span>
          </li>
        </ul>
    </div>


      <!--中间搜索栏  -->
    <div class="serach-container">
      <input class="user-input" placeholder="从零开始学编程"/>
      <el-button  type="primary" class="search-button">
        <el-icon class="el-icon--right" size="large" color="black"><Search /></el-icon>
      </el-button>
      
    </div>
      <!-- 右侧登录栏 -->
    
    <div class="user-container">
      <el-popover 
        v-if="!isLogin"
        placement="bottom" 
        trigger="hover" 
        :show-arrow="false"  
        width="350px"  
        :popper-style="{
          borderRadius: '10px',
        }">
      <template #reference>
      <!-- 用户头像 -->
      <div class="user-avatar"  v-if="!isLogin">
         <span>登录</span>
      </div>
      </template>
         <AvatarLoginCard 
         @login="handleLogin" 
         ></AvatarLoginCard>
      </el-popover>
      <el-popover 
        v-if="isLogin"
        placement="bottom" 
        trigger="hover" 
        :show-arrow="false"  
        width="300px"  
        :popper-style="{
          borderRadius: '10px',
        }">
       <template #reference>
          <div class="user-avatar-login" id="userAvatar" v-if="isLogin">
           <img :src="userInfo.avatar" alt="头像" v-if="isLogin">
          </div>
        </template>
        <template>
        </template>
     <UserInfoCard 
     v-if="isLogin"
     class="user-info-card">
    </UserInfoCard>
      </el-popover>
      <WeChatLoginPage v-if="showqrCodeCard" @closeQrCode="showqrCodeCard = false"></WeChatLoginPage>
      <!-- 用户菜单 -->
  <div class="header-user-menu-container">
        <ul class="header-user-menu">
          <li>
            <div class="user-menu-item">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="right-entry-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 1C5.02955 1 1 5.02955 1 10C1 14.9705 5.02955 19 10 19C14.9705 19 19 14.9705 19 10C19 5.02955 14.9705 1 10 1ZM10.0006 2.63614C14.0612 2.63614 17.3642 5.93996 17.3642 9.99977C17.3642 14.0604 14.0612 17.3634 10.0006 17.3634C5.93996 17.3634 2.63696 14.0604 2.63696 9.99977C2.63696 5.93996 5.93996 2.63614 10.0006 2.63614Z" fill="currentColor"></path><path d="M13.1381 8.05573V8.05331H10.7706C10.7859 7.8643 10.7948 7.67286 10.7948 7.47981C10.7948 7.26414 10.7843 7.05008 10.7649 6.83926C10.7658 6.82552 10.7674 6.81179 10.7674 6.79725V6.79483C10.7674 6.35541 10.4111 6 9.97254 6C9.53312 6 9.17771 6.35622 9.17771 6.79483V6.79725C9.17771 6.85137 9.18336 6.90468 9.19386 6.95557L9.18255 6.95719C9.19871 7.12924 9.20759 7.30291 9.20759 7.479C9.20759 7.67286 9.19709 7.8643 9.17771 8.0525H6.74313V8.05573C6.32876 8.08239 6 8.42649 6 8.84814V8.85057C6 9.28998 6.33683 9.64216 6.77544 9.64216C6.80937 9.64216 6.8441 9.64378 6.89903 9.64297L8.7601 9.63893C8.28837 10.7294 7.47011 11.6341 6.44507 12.2149C6.44023 12.2173 6.43619 12.2197 6.43134 12.2229C6.42003 12.2294 6.40953 12.2359 6.39822 12.2423L6.39903 12.2431C6.17528 12.3837 6.02585 12.6325 6.02585 12.916V12.9184C6.02585 13.3578 6.38207 13.7132 6.82068 13.7132C6.99111 13.7132 7.14782 13.6591 7.27706 13.5687C8.7706 12.706 9.9168 11.3094 10.4556 9.64055H13.0105C13.0517 9.64136 13.1131 9.63893 13.1131 9.63893C13.5905 9.62924 13.9039 9.2916 13.9039 8.85299V8.85057C13.9047 8.42003 13.5638 8.07108 13.1381 8.05573Z" fill="currentColor"></path><path d="M13.7731 12.5388C13.7715 12.5356 13.7691 12.5331 13.7674 12.5307C13.74 12.4814 13.7077 12.4362 13.6713 12.3942C13.1584 11.6672 12.513 11.0412 11.7674 10.5541L11.7666 10.555C11.6366 10.4613 11.4766 10.4055 11.3046 10.4055C10.8652 10.4055 10.5098 10.7617 10.5098 11.2003V11.2028C10.5098 11.5033 10.677 11.765 10.9233 11.8999C11.5615 12.3215 12.0825 12.8045 12.4944 13.4499L12.5372 13.5041C12.6786 13.6333 12.866 13.7133 13.0728 13.7133C13.5122 13.7133 13.8676 13.3571 13.8676 12.9184V12.916C13.8668 12.7795 13.8329 12.6511 13.7731 12.5388Z" fill="currentColor"></path></svg>
              <span class="user-menu-item-text">大会员</span>
            </div>
          </li>
          <li>
          <el-popover 
           placement="bottom" 
           trigger="hover" 
           :show-arrow="false"  
           width="142px"  
           :popper-style="{
             borderRadius: '8px',
             padding: '0px'
           }">
          <template #reference>
            <div class="user-menu-item"  @click="handleClickMessage">
              <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="right-entry-icon"><path d="M15.435 17.7717H4.567C2.60143 17.7717 1 16.1723 1 14.2047V5.76702C1 3.80144 2.59942 2.20001 4.567 2.20001H15.433C17.3986 2.20001 19 3.79943 19 5.76702V14.2047C19.002 16.1703 17.4006 17.7717 15.435 17.7717ZM4.567 4.00062C3.59327 4.00062 2.8006 4.79328 2.8006 5.76702V14.2047C2.8006 15.1784 3.59327 15.9711 4.567 15.9711H15.433C16.4067 15.9711 17.1994 15.1784 17.1994 14.2047V5.76702C17.1994 4.79328 16.4067 4.00062 15.433 4.00062H4.567Z" fill="currentColor"></path><path d="M9.99943 11.2C9.51188 11.2 9.02238 11.0667 8.59748 10.8019L8.5407 10.7635L4.3329 7.65675C3.95304 7.37731 3.88842 6.86226 4.18996 6.50976C4.48954 6.15544 5.0417 6.09699 5.4196 6.37643L9.59412 9.45943C9.84279 9.60189 10.1561 9.60189 10.4067 9.45943L14.5812 6.37643C14.9591 6.09699 15.5113 6.15544 15.8109 6.50976C16.1104 6.86409 16.0478 7.37731 15.6679 7.65675L11.4014 10.8019C10.9765 11.0667 10.487 11.2 9.99943 11.2Z" fill="currentColor"></path></svg>
              <span class="user-menu-item-text">消息</span>
              <div class="red-num--message" v-show="totalMessageCount>0">{{ totalMessageCount }}</div>
            </div>
          </template>
          <div class="message-inner-list" v-if="isLogin">
            <div class="message-inner-list__item" @click="$router.push('/messageCenter/replyMe')"  target="_blank">
              <span>回复我的</span> 
              <span class="message-inner-list__item--num" v-show="replyMessageCount>0">{{ replyMessageCount }}</span>
            </div>
            <div class="message-inner-list__item" @click="$router.push('/messageCenter/atMe')" target="_blank">
              <span>@我的 </span>
              <span class="message-inner-list__item--num" v-show="atMessageCount>0">{{ atMessageCount }}</span>
            </div>
            <div class="message-inner-list__item" @click="$router.push('/messageCenter/receiveLiked')" target="_blank">
              <span>收到的赞 </span>
              <span class="message-inner-list__item--num" v-show="likeMessageCount>0">{{ likeMessageCount }}</span>
            </div>
            <div class="message-inner-list__item" @click="$router.push('/messageCenter/systemInform')" target="_blank">
              <span>系统消息</span> 
              <span class="message-inner-list__item--point"></span>
            </div>
            <div class="message-inner-list__item" @click="$router.push('/messageCenter/myMessage')" target="_blank">
              <span>我的消息 </span>
              <span class="message-inner-list__item--num" v-show="myMessageCount>0">{{ myMessageCount }}</span>
            </div>
          </div>
          <div class="login-card-container" v-else>
            <span>登录即可查看消息记录</span>
            <button class="login-card-btn">立即登录</button>
          </div>
          </el-popover>
          </li>
          <li>
            <div class="user-menu-item">
              <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg" class="right-entry-icon"><g clip-path="url(#clip0)"><path d="M10 10.743C7.69883 10.743 5.83333 8.87747 5.83333 6.5763C5.83333 4.27512 7.69883 2.40964 10 2.40964V10.743Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path><path d="M10 10.743C10 13.0441 8.1345 14.9096 5.83333 14.9096C3.53217 14.9096 1.66667 13.0441 1.66667 10.743H10Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path><path d="M10 10.743C10 8.44182 11.8655 6.57632 14.1667 6.57632C16.4679 6.57632 18.3333 8.44182 18.3333 10.743H10Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path><path d="M9.99999 10.743C12.3012 10.743 14.1667 12.6085 14.1667 14.9096C14.1667 17.2108 12.3012 19.0763 9.99999 19.0763V10.743Z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"></path></g><defs><clipPath id="clip0"><rect width="20" height="20" fill="currentColor" transform="matrix(-1 0 0 1 20 0.742981)"></rect></clipPath></defs></svg>
              <span class="user-menu-item-text">动态</span>
            </div>
          </li>
          <li>
            <div class="user-menu-item">
              <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg" class="right-entry-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.0505 3.16759L12.7915 6.69573C12.954 7.02647 13.2702 7.25612 13.6349 7.30949L17.5294 7.87474C18.448 8.00817 18.8159 9.13785 18.1504 9.78639L15.3331 12.5334C15.0686 12.7905 14.9481 13.1609 15.0104 13.5256L15.6759 17.4031C15.8328 18.3184 14.8721 19.0171 14.0497 18.5845L10.5661 16.7537C10.2402 16.5823 9.85042 16.5823 9.52373 16.7537L6.04087 18.5845C5.21848 19.0171 4.2578 18.3184 4.41468 17.4031L5.07939 13.5256C5.14166 13.1609 5.02198 12.7905 4.75755 12.5334L1.9394 9.78639C1.27469 9.13785 1.64182 8.00817 2.56126 7.87474L6.4549 7.30949C6.82041 7.25612 7.13578 7.02647 7.29832 6.69573L9.04015 3.16759C9.45095 2.33468 10.6389 2.33468 11.0505 3.16759Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path><path d="M11.603 11.8739C11.413 12.5556 10.7871 13.0554 10.0447 13.0554C9.29592 13.0554 8.66679 12.5467 8.48242 11.8569" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></svg>
              <span class="user-menu-item-text">收藏</span>
            </div>
          </li>
          <li>
            <div class="user-menu-item">
              <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg" class="right-entry-icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M10 1.74286C5.02955 1.74286 1 5.7724 1 10.7429C1 15.7133 5.02955 19.7429 10 19.7429C14.9705 19.7429 19 15.7133 19 10.7429C19 5.7724 14.9705 1.74286 10 1.74286ZM10.0006 3.379C14.0612 3.379 17.3642 6.68282 17.3642 10.7426C17.3642 14.8033 14.0612 18.1063 10.0006 18.1063C5.93996 18.1063 2.63696 14.8033 2.63696 10.7426C2.63696 6.68282 5.93996 3.379 10.0006 3.379Z" fill="currentColor"></path><path d="M9.99985 6.6521V10.743" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"></path><path d="M12.4545 10.7427H10" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"></path></svg>
              <span class="user-menu-item-text">历史</span>
            </div>
          </li>
          <li>
            <div class="user-menu-item">
              <svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg" class="right-entry-icon"><mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="2" y="1" ><path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 1.74286H17.5V20.0762H2.5V1.74286Z" fill="currentColor"></path></mask><g mask="url(#mask0)"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.99999 1.74286C9.92916 1.74286 9.85916 1.74369 9.78833 1.74536C5.85416 1.85453 2.58416 5.14869 2.50166 9.08286C2.44999 11.5404 3.58666 13.7304 5.36999 15.1337C5.52166 15.2529 5.63166 15.4162 5.67333 15.6045L6.30416 18.447C6.51583 19.3987 7.36083 20.0762 8.33583 20.0762H11.6617C12.6383 20.0762 13.4842 19.3987 13.6958 18.4445L14.3275 15.602C14.3692 15.4154 14.4775 15.2537 14.6275 15.1354C16.3733 13.7629 17.5 11.637 17.5 9.24286C17.5 5.10036 14.1425 1.74286 9.99999 1.74286ZM10.0003 3.40939C13.2161 3.40939 15.8336 6.02606 15.8336 9.24273C15.8336 11.0386 15.0186 12.7086 13.5978 13.8252C13.1428 14.1827 12.8244 14.6852 12.7011 15.2402L12.0686 18.0827C12.0269 18.2752 11.8586 18.4094 11.6619 18.4094H8.33609C8.14109 18.4094 7.97359 18.2761 7.93192 18.0852L7.30025 15.2427C7.17609 14.6869 6.85775 14.1827 6.40109 13.8236C4.94359 12.6769 4.12942 10.9619 4.16859 9.11773C4.23192 6.05523 6.77442 3.49606 9.83442 3.41189C9.88942 3.41023 9.94525 3.40939 10.0003 3.40939Z" fill="currentColor"></path><path d="M10 6.81299L8.81253 9.18726H11.1875L9.99952 11.561" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"></path></g><path d="M6.66656 15.9095H13.3332" stroke="currentColor" stroke-width="1.7"></path></svg>
              <span class="user-menu-item-text">创作中心</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="user-contribute">
        <el-popover 
        placement="bottom-end" 
        trigger="hover" 
        :show-arrow="false"  
        width="360px"  
        :popper-style="{
          borderRadius: '10px',
        }">
          <template #reference>
            <button class="contribute-button" @click="handleVideoContribute">
              <svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg" class="header-upload-entry__icon"><path d="M12.0824 10H14.1412C15.0508 10 15.7882 10.7374 15.7882 11.6471V12.8824C15.7882 13.792 15.0508 14.5294 14.1412 14.5294H3.84707C2.93743 14.5294 2.20001 13.792 2.20001 12.8824V11.6471C2.20001 10.7374 2.93743 10 3.84707 10H5.90589" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"></path><path d="M8.99413 11.2353L8.99413 3.82353" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"></path><path d="M12.0823 6.29413L8.9941 3.20589L5.90587 6.29413" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"></path></svg>
              <span class="btn-card-text">投稿</span>
            </button>
          </template>
          <ButtonCard />
        </el-popover>
      </div>
    </div>
  </div>

  <div class="category-container" v-show="isCategoryShow" @mouseover="showMore=true" @mouseleave="showMore=false">  
    <div class="box-category">
      <div class="channel-icons">
        <div class="icon-box">
          <svg width="22" height="23" t="1752309443454" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6128" ><path d="M541.87 55.47l-0.06 296.95c44.59-51.23 110.27-83.62 183.53-83.62 134.32 0 243.2 108.88 243.2 243.2v29.87l-296.95-0.06c51.23 44.59 83.62 110.27 83.62 183.53 0 134.32-108.88 243.2-243.2 243.2h-29.87l0.02-296.91c-44.59 51.21-110.26 83.58-183.49 83.58-134.32 0-243.2-108.88-243.2-243.2v-29.87l296.95 0.06c-51.23-44.59-83.62-110.27-83.62-183.53 0-134.32 108.88-243.2 243.2-243.2h29.87z m0 488.83v362.03l5-0.83c81.83-15.74 144.32-85.85 148.39-171.27l0.21-8.89c0-89.41-63.95-163.87-148.6-180.16l-5-0.88z m-62.17-2.43H117.67l0.83 5c15.74 81.83 85.85 144.32 171.27 148.39l8.89 0.21c89.41 0 163.87-63.95 180.16-148.6l0.88-5z m245.63-213.34c-89.41 0-163.87 63.95-180.16 148.6l-0.88 5h362.03l-0.83-5c-15.74-81.83-85.85-144.32-171.27-148.39l-8.89-0.21z m-243.2-210.9l-5 0.88c-84.65 16.28-148.6 90.75-148.6 180.16l0.21 8.89c4.07 85.42 66.56 155.53 148.39 171.27l5 0.83V117.63z" p-id="6129" fill="#707070"></path></svg>
            <span>动态</span>
        </div>
        <div class="icon-box">
          <svg width="22" height="23" t="1752309371616" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4442" ><path d="M484.4 171.4a518.98 518.98 0 0 0 116.5 205.5l5.6 5.6 63.8 77.8 34.2-91.3c5.6-19.6 13.4-39.2 19-61.6 101.2 97.5 141.9 242 106.4 378-12.7 51.3-42 97-83.4 129.9-63.9 53.4-145.3 81.1-228.5 77.8-99.5 4.4-195.6-36.9-261-112-9.6-9.2-17.7-19.8-24.1-31.4-55-81.5-63.3-185.8-21.8-275 12.5 13.1 25.8 25.4 39.8 37 7.8 8.4 16.8 14 21.8 19.6l119.8 122.1-23-168c-20.1-117.5 23.6-237.1 114.9-314z m44.8-107.5c-136.1 91.3-247.5 241.9-224 427.8-29.1-28.6-85.1-64.4-101.4-119.8C103.3 486.3 92.2 654.1 177 780.7c9.7 15.7 20.7 30.5 33 44.2 76.4 89.7 189.7 139.4 307.4 135 97 1.9 191.6-30.4 267.1-91.3 51.1-41.6 88-97.9 105.8-161.3 47.3-190.9-33.4-390.5-199.9-495-3.8 49.7-14.9 98.6-33 145C576.7 281 530.4 175 529.2 63.9z" fill="#707070" p-id="4443"></path></svg>
          <span>热门</span>
        </div>
      </div>
      <div class="nav-container">

        <div class="show-nav-container-up">
        <div
          v-for="item in tags1"
          :key="item"
          class="nav-center-item"
        >{{ item }}</div>
        </div>
        <div class="show-nav-container-down" v-show="showMore">
        <div
          v-for="item in tags2"
          :key="item"
          class="nav-center-item"
        >{{ item }}</div>
        </div>
     </div>
    </div>
  </div>
</header>

</template>

<style scoped>

.header-container{
  width: 100%;
  /* max-width: 1880px; */
  padding: 8px 7px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  position: relative;
  background-color: #fff;

  /* position: relative; */
  /* border: red 1px solid; */
}
.navbar-container{
  min-width: 550px;
  margin-right: 10px;
  margin-left: 5px;
  /* border: 1px solid green; */
  display: flex;
  padding: 0 2px;
  justify-content: center;
}
.bili-menu{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 0;
  font-size: 0.9em;
  /* gap:10px; */
  /* border: red 1px solid; */
  list-style: none;
}
.download-client{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* border: red 1px solid; */
}
.mini-header__logo{
  width: 140px;
  height: 64px;
}
.bili-menu svg{
  width: 18px;
  height: 18px;
  /* border: red 1px solid; */
}
.bili-menu li{
  font-size: 14px;
  transition: transform 0.2s; 
  color: black;
  white-space: nowrap;
  
}
.bili-menu li:hover{
  transform: translateY(-3px); /* 向上移动2px */
  background-color: transparent;
  cursor: pointer;
}
.serach-container{
  width: 35%;
  max-width: 500px;
  margin-left: 10px;
  margin-right: 12px;
  position: relative;
  background-color: #f5f5f5;
  opacity: 0.85;
  border-radius: 8px;
  padding-left: 5px;
  /* border: 1px solid green; */
}
.user-input{
  width: 100%;
  height: 38px;
  background-color: transparent;
  border-radius: 8px;
  border: none;
  /* border: red 1px solid; */
}
.user-input:focus{
  outline: none;
}
.search-button{
  width: 10px;
  height: 20px;
  right: 5px;
  top:9px;
  border: none;
  position: absolute;
  background-color: transparent;
}
.serach-container:hover{
  opacity: 0.95;
}
.user-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  padding: 2px;
  padding-right: 20px;
  /* border: red 1px solid; */
}
.user-avatar{
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: #fff;
  background: #00AEEC;
  text-align: center;
  letter-spacing: 0;
  font-size: 14px;
  line-height: 36px;
  margin-right: 5px;
  position: relative;
  z-index: 1000;
  
}
.user-avatar-login img:hover{
  transform: scale(2.8) translateY(18px);  
  position: relative; 
  z-index: 1000;
}
.user-info-card{
  position: relative;
  z-index: 0;
}
.user-avatar-login img{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid aliceblue;
  cursor: pointer;
  transition: transform 0.4s ease;
  /* border: 1px solid #fff; */
}

.bili-header .header-avatar-wrap {
    position: relative;
    box-sizing: content-box;
    padding-right: 10px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 2;
}
.bili-header .mini-avatar--large .header-entry-mini {
    animation: fadeOut .3s both;
}
.bili-header .header-entry-mini {
    position: absolute;
    top: 5px;
    left: 10px;
    z-index: 2;
    display: block;
    width: 38px;
    height: 38px;
    border-radius: 50%;
}
.header-user-menu-container{
  display: flex;
  align-items: center;
  justify-items: center;
  transition: transform 0.2s;
  color: black;
  white-space: nowrap;
  font-size: 13px;
  /* border: 1px solid #fff; */
}
.header-user-menu{
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 2px 10px;
  /* border: 1px solid #fff; */
  /* border: 1px solid red; */
  
}
.message-inner-list__item {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 5px 10px 25px;
    color: #61666d;
    text-align: left;
    font-size: 14px;
    transition: background-color .3s;
    font-family: Microsoft YaHei;
}
.message-inner-list__item:hover {
  background-color: #E3E5E7;
}
.message-inner-list__item--num {
    position: absolute;
    right: 17px;
    padding: 0 5px;
    border-radius: 8px;
    background: #fa5a57;
    color: #fff;
    font-size: 12px;
    line-height: 16px;
}
.message-inner-list {
    display: flex;
    flex-direction: column;
    padding: 12px 0;
}
.user-menu-item{
  display: flex;
  margin-right: 2px;
  flex-direction: column;
  align-items: center;
  /* border: 1px solid green; */
  transition: transform 0.2s; /* 添加transform过渡 */
  position: relative;
}
.user-menu-item:hover{
  transform: translateY(-3px); /* 向上移动2px */
}
.red-num--message {
  position: absolute;
  top: -6px;
  left: 16px;
  z-index: 1;
  padding: 0 3px;
  min-width: 15px;
  border-radius: 10px;
  background-color: #fa5a57;
  color: #fff;
  font-size: 12px;
  line-height: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-label{
  font-size: 14px;
}
.header-user-menu-item:hover{
  transform: translateY(-3px); /* 向上移动2px */
  background-color: transparent;
  cursor: pointer;
}
.contribute-button{
  background-color: #FB7299;
  border: none;
  color: white;
  font-size: 14px;
  height: 35px;
  width: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 8px;  
  margin-right: 10px;
}
.contribute-button:hover{
  background-color: #ED9CB6;
}
.login-card-container{
  width: 300px;
  height: 130px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: fixed;
  right:220px;
  top: 65px;
  z-index: 100;
}
.login-card-container span{
  font-size: 14px;
  color: #999;
  text-align: center;
  margin-bottom: 10px;
}
.login-card-btn{
  width: 90%;
  height: 45px;
  border-radius: 10px;
  background-color: #4FABF0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  color: white;
  font-size: 14px;
  border: none;
  outline: none;
  cursor: pointer;
  margin: 0 auto;
}
@media only screen and (max-width: 1300px) {
  .user-menu-item-text{
    display:none;
  }
  .contribute-button-text{
    display: none;
  }
  .serach-container{
    min-width: 200px;
  }
  .btn-card-text{
    display: none;
  }
  .contribute-button{
    width: 40px;
  }
}
@media only screen and (max-width: 1100px) {
  .igored-text{
    display: none;
  }
  .navbar-container{
    min-width: 450px;
  }
}



.category-container{
  width:100vw;
  /* height: 150px; */
  background-color: white;
  display: flex;
  justify-content: center;
  align-self: start;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border: 1px solid #ebebeb;
  padding: 7px 0;
}
.box-category{
  width: 90vw;
  height: 100%;
  display: flex;
  align-items: center;
  /* border: 1px soild red; */
}
.channel-icons{
  align-self: flex-start;
  margin-top: 6px;
  display: flex;
  width: 200px;
  cursor: pointer;
  margin-right: 5px;;
  /* border: 1px soild royalblue; */
}
.icon-box{
  display: flex;
  justify-content: center;
  width: 50%;
  text-align: center;
  /* border: 1px solid red; */
  font-size: 0.875em;
  white-space: nowrap;
}
.icon-box:hover{
  color: deepskyblue;
  cursor: pointer
}
.nav-container{
  width: 90%;
  display: flex;
  flex-direction: column;
  /* border: 1px soild green; */
}
.show-nav-container-up{
  width:100%;
  display: grid;
  grid-template-columns: repeat(13,minmax(65px,1fr));
  grid-template-rows: 30px;
  gap:8px;
  overflow: hidden;
  /* border: 1px solid green; */

}
.show-nav-container-down{
  margin-top: 10px;
  width:100%;
  display: grid;
  grid-template-columns: repeat(13,minmax(65px,1fr));
  grid-auto-rows: repeat(30px,1fr);
  gap:8px;
  overflow: hidden;
  /* border: 1px solid red; */

}
.nav-center-item{
  height: 30px;
  display: flex;
  background-color: #f5f5f5;
  color: #666666;
  border-radius: 7px;
  align-items: center;
  justify-content: center;
  font-size: 0.885em;
  white-space: nowrap;
}
.nav-center-item:hover{
  background-color: lightgray;
  color: #333333;
  cursor: pointer
}



</style>